<template>
  <view class="prize-list-container">
    <!-- 列表内容 -->
    <view class="prize-list">
      <view @click="navToindex" class="prize-item" v-for="(item, index) in prizeList" :key="index">
        <view class="prize-header">
          <text class="prize-title">{{ item.ebLotteryActivityPrize.prizeName || "奖品名称" }}</text>
          <text class="prize-status" :class="item.statusClass">{{ item.statusText }}</text>
        </view>
        <view class="prize-content" style="margin-bottom: 30px">
          <view class="prize-image-container" v-if="item.ebLotteryActivityPrize.prizeIcon">
            <image class="prize-image" :src="IMG_URL + item.ebLotteryActivityPrize.prizeIcon" mode="aspectFill" @error="onImageError(index)"></image>
          </view>
          <view class="prize-info">
            <view class="info-row">
              <text class="label">中奖时间：</text>
              <text class="value">{{ item.createTime || "2023-01-01 12:00:00" }}</text>
            </view>
            <view class="info-row">
              <text class="label">抽奖活动：</text>
              <text class="value">{{ item.ebLotteryActivity.activityName || "活动名称" }}</text>
            </view>
            <view class="info-row">
              <text class="label">兑奖码：</text>
              <text class="value prize-code">{{ item.redeemCode || "无" }}</text>
            </view>
          </view>
        </view>
      </view>

      <!-- 加载更多提示 -->
      <view class="loading-status" v-if="loadingMore">
        <text>加载中...</text>
      </view>
      <view class="loading-status no-more" v-else-if="!hasMore && prizeList.length > 0">
        <text>没有更多数据了</text>
      </view>
      <view class="loading-status no-more" v-else-if="prizeList.length === 0 && !loadingMore">
        <text>暂无中奖记录</text>
      </view>
    </view>
  </view>
</template>

<script>
import { participateList } from "../../../utils/api/api";
import { IMG_URL } from "../../../config/index";
export default {
  name: "PrizeList",
  data() {
    return {
      IMG_URL,
      prizeList: [],
      params: {
        pageNum: 1,
        pageSize: 10,
      },
      hasMore: true,
      loadingMore: false,
      refreshing: false,
    };
  },

  mounted() {
    this.loadData();
  },

  // 原生下拉刷新
  onPullDownRefresh() {
    if (this.refreshing) return;

    this.refreshing = true;
    this.params.pageNum = 1;
    this.loadData();
  },

  // 原生上拉加载
  onReachBottom() {
    if (this.loadingMore || !this.hasMore) return;

    this.loadingMore = true;
    this.params.pageNum++;
    this.loadData();
  },

  methods: {
    navToindex() {
      uni.switchTab({
        url: "/pages_h5/myCenter/index",
      });
    },
    // 加载数据
    async loadData() {
      try {
        const res = await participateList({
          pageNum: this.params.pageNum,
          pageSize: this.params.pageSize,
          ebUserId: uni.getStorageSync("uid"),
        });

        if (res && res.code === 200) {
          if (this.params.pageNum == 1) {
            this.prizeList = res.rows || [];
          } else {
            this.prizeList = [...this.prizeList, ...(res.rows || [])];
          }

          // 处理状态显示
          this.processStatus();

          // 判断是否还有更多数据
          // 修复逻辑：当前数据总数小于总记录数时，还有更多数据
          this.hasMore = this.prizeList.length < (res.total || 0);
        }
      } catch (error) {
        console.error("加载数据失败:", error);
        uni.showToast({
          title: "数据加载失败",
          icon: "none",
        });
      } finally {
        this.loadingMore = false;
        this.refreshing = false;
        // 停止下拉刷新
        uni.stopPullDownRefresh();
      }
    },

    // 处理状态显示
    processStatus() {
      this.prizeList.forEach((item) => {
        if (item.isOverdue === 1) {
          item.statusText = "已过期";
          item.statusClass = "status-overdue";
        } else if (item.isIssue === 1) {
          item.statusText = "已发放";
          item.statusClass = "status-issued";
        } else {
          item.statusText = "未发放";
          item.statusClass = "status-default";
        }
      });
    },

    // 图片加载错误处理
    onImageError(index) {
      // 可以设置默认图片或隐藏图片容器
      // 这里我们只是简单处理，避免显示破损图片
      this.$set(this.prizeList[index].ebLotteryActivityPrize, "prizeIcon", "");
    },
  },
};
</script>

<style scoped>
.prize-list-container {
  padding: 20rpx;
  background-color: #f5f5f5;
  min-height: 100vh;
}

.prize-item {
  background-color: #ffffff;
  border-radius: 16rpx;
  padding: 24rpx;
  margin-bottom: 24rpx;
  box-shadow: 0 4rpx 16rpx rgba(0, 0, 0, 0.06);
}

.prize-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding-bottom: 20rpx;
  border-bottom: 1rpx solid #f0f0f0;
  margin-bottom: 20rpx;
}

.prize-title {
  font-size: 32rpx;
  font-weight: bold;
  color: #333333;
}

.prize-status {
  font-size: 24rpx;
  padding: 5rpx 15rpx;
  border-radius: 20rpx;
}

.status-overdue {
  background-color: #f0f0f0;
  color: #8c8c8c;
}

.status-issued {
  background-color: #f6ffed;
  color: #52c41a;
}

.status-default {
  background-color: #fff2e8;
  color: #fa8c16;
}

.prize-content {
  display: flex;
  flex-direction: row;
  gap: 20rpx;
}

.prize-image-container {
  width: 160rpx;
  height: 160rpx;
  flex-shrink: 0;
  border-radius: 12rpx;
  overflow: hidden;
  background-color: #f8f8f8;
  display: flex;
  align-items: center;
  justify-content: center;
}

.prize-image {
  width: 100%;
  height: 100%;
}

.prize-info {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 12rpx;
}

.info-row {
  display: flex;
}

.label {
  font-size: 26rpx;
  color: #666666;
  width: 160rpx;
}

.value {
  font-size: 26rpx;
  color: #333333;
  flex: 1;
}

.prize-code {
  font-weight: bold;
  color: #1890ff;
}

.loading-status {
  text-align: center;
  padding: 30rpx;
  font-size: 26rpx;
  color: #999999;
}

.loading-status.no-more {
  color: #cccccc;
}
</style>
